<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>防止ajax重复提交</title>
</head>
<body>
<button id="btn">提交</button>
<script>

    /**
     * 模拟ajax提交
     * @fn 回调函数
     * */
    function Ajax(fn) {
        setTimeout(function () {
            var data = {result: true, msg: '提交成功！'};
            fn(data);
        }, 2000);
    }
    /**
     * btn click 提交事件
     *
     * */
    btn.onclick = function () {
        //检查 按钮是否被锁住，锁住直接rerun
        if (btn.getAttribute('lock')) {
            return;
        }
        //上锁
        btn.setAttribute('lock', 1);
        //更改状态
        btn.innerText = '提交中...';
        //模拟ajax提交
        Ajax(function (data) {
            //请求成功
            if (data.result) {
                console.log('请求成功');
                //请求成功解锁
                btn.setAttribute('lock', "");
                //还原状态
                btn.innerText = '提交';
            } else {
                console.log('请求失败');
                //请求失败解锁
                btn.setAttribute('lock', "");
                //还原状态
                btn.innerText = '提交';
            }
        });
    }
</script>
</body>
<p>
</html>
</p>

<p>
    <span style="color:#333333;font-family:-apple-system, " font-size:16px;background-color:#FFFFFF;">1.提交数据之前判断当前提交按钮是否存在lock锁</span>
    <span style="color:#333333;font-family:-apple-system, "
          font-size:16px;background-color:#FFFFFF;">2.在ajax提交之前给提交按钮上锁</span> <span
        style="color:#333333;font-family:-apple-system, "
        font-size:16px;background-color:#FFFFFF;">3.ajax成功之后或者失败之后解锁</span>
</p>